<template>
  <uni-popup ref="popup" type="top">
    <view class="pop-content">
      <text class="title" @click="close">取消</text>
      <scroll-view class="con" scroll-y="true" show-scrollbar="true">
        <view class="item-title">货源品质</view>
        <view class="row item-btn-group">
          <view
            class="item-btn"
            :class="{ actived: currentObj.goodsQuality == item.value }"
            @click="changeType('goodsQuality', item)"
            v-for="item in goodsQuality"
            :key="item.value"
            >{{ item.label }}</view
          >
        </view>
        <view class="item-title">车长</view>
        <view class="row item-btn-group">
          <view
            class="item-btn"
            :class="{ actived: currentObj.vehicleLengthQuery == item.value }"
            @click="changeType('vehicleLengthQuery', item)"
            v-for="item in vehicleLengthQuery"
            :key="item.value"
            >{{ item.label }}</view
          >
        </view>
        <view class="item-title">车型</view>
        <view class="row item-btn-group">
          <view
            class="item-btn"
            :class="{ actived: currentObj.vehicleTypeQuery == item.value }"
            @click="changeType('vehicleTypeQuery', item)"
            v-for="item in vehicleTypeQuery"
            :key="item.value"
            >{{ item.label }}</view
          >
        </view>
        <view class="item-title">装货时间</view>
        <view class="row item-btn-group">
          <view
            class="item-btn"
            :class="{ actived: currentObj.dateRang == item.value }"
            @click="changeType('dateRang', item)"
            v-for="item in dateRang"
            :key="item.value"
            >{{ item.label }}</view
          >
        </view>
        <view class="item-title">用车类型</view>
        <view class="row item-btn-group">
          <view
            class="item-btn"
            :class="{ actived: currentObj.useVehicleMode == item.value }"
            @click="changeType('useVehicleMode', item)"
            v-for="item in useVehicleMode"
            :key="item.value"
            >{{ item.label }}</view
          >
        </view>
      </scroll-view>
      <view class="btn-group row">
        <view class="btn center silver" @click="reset">
          <text>{{ cancelText }}</text>
        </view>
        <view class="btn center red" @click="confirm">
          <text>{{ confirmText }}</text>
        </view>
      </view>
    </view>
  </uni-popup>
</template>

<script>
/**
 * 自定义 确认对话框
 * @prop title 标题
 * @prop text 提示内容
 * @prop cancelText 取消按钮文字
 * @prop confirmText 确认按钮文字
 * @event onConfirm 确认按钮点击时触发
 */
export default {
  data() {
    return {
      currentObj: {
        goodsQuality: "",
        vehicleLengthQuery: "",
        vehicleTypeQuery: "",
        dateRang: "",
        useVehicleMode: "",
      },
    };
  },
  props: {
    goodsQuality: Array,
    vehicleLengthQuery: Array,
    vehicleTypeQuery: Array,
    dateRang: Array,
    useVehicleMode: Array,
    cancelText: {
      type: String,
      default: "重置",
    },
    confirmText: {
      type: String,
      default: "确认",
    },
  },
  methods: {
    changeType(type, item) {
      this.currentObj[type] = item.value;
    },
    confirm() {
      this.$emit("onConfirm", { ...this.currentObj });
      this.close();
    },
    open() {
      this.$refs.popup.open();
    },
    reset() {
      this.currentObj = {
        goodsQuality: "",
        vehicleLengthQuery: "",
        vehicleTypeQuery: "",
        dateRang: "",
        useVehicleMode: "",
      };
    },
    close() {
      this.$refs.popup.close();
    },
  },
};
</script>

<style scoped lang="scss">
.pop-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 750rpx;
  padding-top: 36rpx;
  background-color: #fff;
  border-radius: 0 0 40rpx 40rpx;
  .title {
    color: #f5473b;
    margin-top: calc(var(--status-bar-height) + 0rpx);
    font-size: 28rpx;
    line-height: 58rpx;
    font-weight: 700;
    align-self: flex-end;
    padding-right: 50rpx;
  }
  .con {
    padding: 6rpx 6rpx 16rpx 6rpx;
    height: 700rpx;
    width: 700rpx;
    // border: 1px solid red;
    .item-title {
      font-family: PingFangSC, PingFang SC;
      font-weight: 400;
      font-size: 32rpx;
      color: #222222;
      line-height: 32rpx;
      text-align: left;
      font-style: normal;
      padding: 20rpx 20rpx;
    }
    .item-btn-group {
      // width: 700rpx;
      display: flex;
      flex-wrap: wrap;
      margin-left: 30rpx;
      flex: 1;
      .item-date {
        flex: 1;
        height: 66rpx;
        line-height: 66rpx;
        font-size: 30rpx;
        background: #f6f6f6;
        color: #666666;
        margin: 10rpx 10rpx;
        border-radius: 45px;
        text-align: center;
      }
      .item-silver {
        width: 24rpx;
        height: 2rpx;
        border: 1rpx solid #d8d8d8;
        border-radius: 1rpx;
        margin: auto 10rpx;
      }
      .item-btn {
        // flex: 1;
        min-width: 140rpx;
        display: block;
        height: 66rpx;
        line-height: 66rpx;
        font-size: 30rpx;
        background: #f6f6f6;
        color: #666666;
        margin: 20rpx 30rpx 20rpx 0;
        // padding: auto 40rpx;
        border-radius: 45px;
        text-align: center;
        &.actived {
          background: #f5473b;
          color: #fff;
        }
      }
    }
    .item-btn-group .item-btn:last-child {
      // border: 1px solid red;
    }
  }
  .btn-group {
    width: 100%;
    padding-bottom: 20rpx;
  }
  .btn {
    position: relative;
    top: 0;
    flex: 1;
    height: 88rpx;
    line-height: 88rpx;
    font-size: 36rpx;
    color: #f55348;
    margin: 0 30rpx 20rpx;
    border-radius: 45px;

    &:last-child {
      color: #ffffff;
    }
  }
  .red {
    background: linear-gradient(151deg, #f75248 0%, #f5473b 100%);
  }
  .silver {
    background: #f6f6f6;
    color: #222222;
  }
}
</style>
